<template>
    <div class="person">
        <h1 id="t1">RR</h1>
        <h1 ref="title1">GG</h1>
        <h2 ref="title2">GGGGG</h2>
        <h3 ref="title3">GGGGGGGGGG</h3>

        <button @click="showLog">打印内容</button>
        </div>
</template>

<!-- 

    使用标签的来获取元素进行操作.如果我们使用传统的DOM来操作,会有被父组件的同意ID使用给顶替掉从而报错的风险!
    可以理解为局部作用域,只在我们这个作用域中,起作用.不会影响到其他作用域
 -->
<script lang="ts" setup name='Person'>
import { ref } from 'vue';

let a = ref(1)
let title1 = ref()
let title2 = ref()
let title3 = ref()

function showLog() {
    /* const t1 = document.getElementById("t1");
    console.log(t1);
    console.log((t1 as HTMLElement).innerText)
    console.log((<HTMLElement>t1).innerText)
    console.log(t1?.innerText) */
    console.log(title1.value);
    console.log(title2.value);
    console.log(title3.value);


}
// 使用defineExpose将组件中的数据交给外部
//  defineExpose({a})
</script>
<style scoped>
/*  组件的样式 */
.person {
    /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>
